import React from 'react'
import { useState } from 'react'
import './index.css'
export default function Item({ todo, done }) {

  const [isActive, setIsActive] = useState(false)
  //鼠标移入移出事件
  const mouseHandle = (boolean) => {
    return ()=>{
      setIsActive(boolean)
    }
  }
  return (
    <li onMouseEnter={mouseHandle(true)}
      onMouseLeave={mouseHandle(false)}
      className={isActive ? 'active' : ''}
    >
      <label>
        <input type="checkbox" checked={done} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" style={{ display: isActive?'block':'none' }}>删除</button>
    </li>
  )
}
